<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue.js Ajax(axios)</title>
		<script src="../js/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		<!-- GET 方法 -->
		<div id="app">
		  {{ info }}
		</div>
		<script type = "text/javascript">
		new Vue({
		  el: '#app',
		  data () {
			return {
			  info: null
			}
		  },
		  mounted () {
			axios
			  .get('https://www.runoob.com/try/ajax/json_demo.json')
			  .then(response => (this.info = response))
			  .catch(function (error) { // 请求失败处理
				console.log(error);
			  });
		  }
		})
		</script>
		<p>----------------------------------------------------</p>
		<!-- 使用 response.data 读取 JSON 数据 -->
		<div id="app1">
		  <h1>网站列表</h1>
		  <div
			v-for="site in info"
		  >
			{{ site.name }}
		  </div>
		</div>
		<script type = "text/javascript">
		new Vue({
		  el: '#app1',
		  data () {
			return {
			  info: null
			}
		  },
		  mounted () {
			axios
			  .get('https://www.runoob.com/try/ajax/json_demo.json')
			  .then(response => (this.info = response.data.sites))
			  .catch(function (error) { // 请求失败处理
				console.log(error);
			  });
		  }
		})
		</script>
		<p>--------------------------------------------------------------</p>
		<div id="app3">
		  {{ info }}
		</div>
		<script type = "text/javascript">
		new Vue({
		  el: '#app',
		  data () {
			return {
			  info: null
			}
		  },
		  mounted () {
			axios
			  .post('https://www.runoob.com/try/ajax/demo_axios_post.php')
			  .then(response => (this.info = response))
			  .catch(function (error) { // 请求失败处理
				console.log(error);
			  });
		  }
		})
		</script>
		<p>----------------------------------------------------</p>
		<!--  -->
		<div id="box">
			<input type="button" @click="post()" value="点我异步获取数据(Post)">
		</div>
		<script type = "text/javascript">
		window.onload = function(){
			var vm = new Vue({
				el:'#box',
				data:{
					msg:'Hello World!',
				},
				methods:{
					post:function(){
						//发送 post 请求
						this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
							document.write(res.body);    
						},function(res){
							console.log(res.status);
						});
					}
				}
			});
		}
		</script>
	</body>
</html>
